<template>
	<view class="setting">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">{{$t('navbar.设置')}}</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="list">
				<view class="avatar_box" @click="uploadAvatar">
					<view class="avatar">
						<image :src="user_info.head_portrait"></image>
					</view>
					<view class="avatar_text">{{$t('login.头像')}}</view>
					<view class="right">
						<image src="@/static/images/r1.png" class="icon"></image>
					</view>
				</view>
				<view class="item" @click="open_nikename">
					<view class="key">{{$t('login.昵称')}}</view>
					<view class="value">
						<text>{{user_info.nickname}}</text>
						<image src="@/static/images/r1.png"></image>
					</view>
				</view>
				<view class="item" @click="router('/pages/login/change_password')">
					<view class="key">{{$t('login.修改登入密码')}}</view>
					<image src="@/static/images/r1.png" class="icon"></image>
				</view>
				<view class="item" @click="router('/pages/login/change_password_two')">
					<view class="key">{{$t('login.修改交易密码')}}</view>
					<image src="@/static/images/r1.png" class="icon"></image>
				</view>
				<view class="item" @click="router('/pages/login/help')">
					<view class="key">{{$t('login.帮助中心')}}</view>
					<image src="@/static/images/r1.png" class="icon"></image>
				</view>
				<!-- <view class="item" @click="router('/pages/game/index')">
					<view class="key">CSGO·大逃杀</view>
					<image src="@/static/images/r1.png" class="icon"></image>
				</view> -->
			</view>
			<view class="out_login">
				<view @click="outLogin">{{$t('login.退出登入')}}</view>
			</view>
		</view>
		<uv-popup ref="popupRef" bgColor="none">
			<NikeName :user_info="user_info" @close="onClose" />
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		upload,
		userInfo,
		userEdit,
		userLogout
	} from "@/request/api";
	import NikeName from "@/components/my/NikeName.vue";
	import {
		ref,
		shallowRef
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();

	import useStore from "@/stores/index.js";
	const {
		useLoginStore
	} = useStore();

	const user_info = ref({});
	const getUserInfo = async () => {
		let {
			user
		} = await userInfo();
		user_info.value = user;
	};
	getUserInfo();

	const uploadAvatar = async () => {
		uni.chooseImage({
			count: 1,
			success: async (res) => {
				let tempFilePaths = res.tempFilePaths;
				let filePath = tempFilePaths[0];
				let {
					url
				} = await upload({
					filePath,
					name: 'image',
				});
				user_info.value.head_portrait = url;
				await userEdit({
					head_portrait: url
				});
				uni.$uv.toast("操作成功");
			}
		})
	};
	const popupRef = shallowRef();
	const open_nikename = () => popupRef.value.open('center');
	const onClose = () => {
		popupRef.value.close();
		getUserInfo();
	};

	const outLogin = async () => {
		await userLogout();
		uni.$uv.toast("操作成功");
		setTimeout(() => {
			useLoginStore.outLogin();
		}, 1000);
	};
</script>

<style scoped lang="scss">
	.setting {
		min-height: 100vh;

		.center_slot {
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 800;
		}

		.content {
			padding: 50rpx 20rpx 0;
			box-sizing: border-box;

			.list {
				border-radius: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				background: #2F2F2F;
				overflow: hidden;

				.avatar_box {
					width: 100%;
					height: 200rpx;
					border-bottom: 1px solid #42433F;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.avatar_text {
						flex: 1;
						color: #FFFFFF;
						font-size: 28rpx;
						padding-left: 40rpx;
						box-sizing: border-box;
					}

					.right {
						image {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.item {
					height: 120rpx;
					border-bottom: 1px solid #42433F;
					padding: 0 6rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&:last-child {
						border-bottom: none;
					}

					.key {
						color: #FFFFFF;
						font-size: 28rpx;
					}

					.icon {
						width: 20rpx;
						height: 20rpx;
					}

					.value {
						display: flex;
						align-items: center;

						text {
							color: #999999;
							font-size: 28rpx;
						}

						image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 30rpx;

							&.copy {
								width: 28rpx;
								height: 28rpx;
							}
						}
					}
				}
			}

			.out_login {
				margin-top: 60rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				view {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #111111;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 20rpx;
					background: #DDF247;
				}
			}
		}
	}
</style>